<template>
  <div>
    <div style="height: 40px">
      <h1>医院管理</h1>
    </div>
    <div style="width: 100%">
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
      <div id="shaixuan_2">
        <div id="text">
          <font></font>
        </div>
        <div id="input">
          <el-input v-model="doctor.name"
                    placeholder="请输入医生姓名或账号"></el-input>
        </div>
        <div id="date">
          <el-dropdown style="margin-right: 70px" @command="departmentMethod">
            <el-button type="primary">
              {{ department }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,i) in departments" :key="i" :command="item">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown @command="postMethod">
            <el-button type="primary">
              {{ post }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,i) in posts" :key="i" :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div id="button">
          <el-button type="primary" @click="doctorFilter">筛选</el-button>
        </div>

      </div>
    </div>

    <div>
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-querylist"></i>
        <span slot="title">医院列表</span>
        <span style="margin-left: 500px">
          <el-button @click="addHospital()">新增医院</el-button>
          <template>
            <!-- 编辑时候的弹出层 -->
            <el-dialog title="医院新增"
                       :visible.sync="dialogFormVisible"
                       width="800px"
                       top="20px"
                       :append-to-body="true">
               <div>
                 医院名称*<el-input v-model="newHospital.name"></el-input>
              </div>
              <div>
                <i>是否推荐*</i>
                <el-radio-group v-model="newHospital.isRec">
                  <el-radio label="是">是</el-radio>
                  <el-radio label="否">否</el-radio>
                </el-radio-group>
              </div>
              <div>
                <i>医院等级</i><el-input v-model="newHospital.hospitalGrade"></el-input>
               </div>
              <div>
                <i>医院类型</i><el-input v-model="newHospital.hospitalType"></el-input>
               </div>
              <div>
                <i>医生人数</i><el-input v-model="newHospital.doctorNumber"></el-input>
              </div>
              <div>
                <i>科室人数</i><el-input v-model="newHospital.depTmNumber"></el-input>
              </div>
              <div>
                <i>地区</i><el-input v-model="newHospital.region"></el-input>
              </div>
              <div>
                <i>详细地址</i><el-input v-model="newHospital.addr"></el-input>
              </div>
               <div>
                <i>医院电话</i><el-input v-model="newHospital.phone"></el-input>
              </div>
              <div>
                <i>医院简介</i><el-input v-model="newHospital.resume"></el-input>
              </div>

              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="handleSet()">确 定</el-button>
              </div>
            </el-dialog>
          </template>
          </span>
      </div>

      <el-table :data="tableData"
                border
                style="width: 100%">
        <el-table-column prop=""
                         label="选择"
                         width="50"
                         align="center">
          <input type="checkbox">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="60">
        </el-table-column>
        <el-table-column
          prop="name"
          label="医院名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="hospitalGrade"
          label="医院等级"
          width="120">
        </el-table-column>
        <el-table-column
          prop="hospitalType"
          label="医院类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="uploader"
          label="上传人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="上传时间"
          width="170">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small" style="background-color: #00d4ff; color: #ebebeb">查看详情</el-button>
            <el-button @click="handleEdit(scope.row)" type="text" size="small" style="background-color: #00d4ff; color: #ebebeb">编辑</el-button>
            <el-button @click="delDoctor(scope.$index,scope.row)" type="text" size="small" style="background-color: red; color: #ebebeb">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div id="all">
        <input type="checkbox"
               id="checkall">全选
      </div>
      <el-button type="danger"
                 id="delall"
                 size="mini">批量删除</el-button>
      <div id="page">
        <el-pagination background
                       @current-change="handleCurrentChange"
                       :page-size="pageSize"
                       layout="total, prev, pager, next"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "HospitalManagement",
  data(){
    return{
      visible: false,

      // 是否为添加状态
      addStauts: true,

      newHospital: {
        id: '',
        name: '',
        isRec: '',
        hospitalGrade: '',
        hospitalType: '',
        doctorNumber: '',
        depTmNumber: '',
        region: '',
        addr: '',
        phone: '',
        resume: ''
      },

      dialogFormVisible: false,

      val: 0,

      active: '',

      doctor: {
        // 搜索条件医院名
        name: "",
        depTmName: "",
        positionName: ""
      },

      departments: ["请选择省市","北京市","上海市","天津市","重庆市","广东省","广西省","四川省"],
      department: '请选择省市',
      posts: ["全部"],
      post: '全部',
      tableData: [],
      filterStatus: false,
      total: 0,
      pageSize: 10
    }
  },
  methods: {
    //职务选择
    departmentMethod(department_name){
      this.department = department_name;
    },
    //科室选择
    postMethod(post_name){
      this.post = post_name;
    },
    // 增加医院
    addHospital() {
      this.dialogFormVisible=true
    },
    handleSet(index, row) {
      if (this.addStauts) {
        this.$confirm('将增加医院, 是否继续', '增加', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/hospital/inter',
            data: this.newHospital
          }).then(data =>{
            this.dialogFormVisible = false
            this.handleCurrentChange(this.val);

            this.addStauts = true;
            this.newHospital.id = '',
              this.newHospital.name = '',
              this.newHospital.isRec = '',
              this.newHospital.hospitalGrade = '',
              this.newHospital.hospitalType = '',
              this.newHospital.doctorNumber = '',
              this.newHospital.depTmNumber = '',
              this.newHospital.region = '',
              this.newHospital.addr = '',
              this.newHospital.phone = '',
              this.newHospital.resume = ''

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消增加'
          });

          this.addStauts = true;
          this.newHospital.id = '',
            this.newHospital.name = '',
            this.newHospital.isRec = '',
            this.newHospital.hospitalGrade = '',
            this.newHospital.hospitalType = '',
            this.newHospital.doctorNumber = '',
            this.newHospital.depTmNumber = '',
            this.newHospital.region = '',
            this.newHospital.addr = '',
            this.newHospital.phone = '',
            this.newHospital.resume = ''

        });
      }else {
        this.$confirm('将修改医院信息, 是否继续', '修改', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/hospital/update',
            data: this.newHospital
          }).then(data =>{
            this.dialogFormVisible = false
            this.handleCurrentChange(this.val);

            this.addStauts = true;
            this.newHospital.id = '',
              this.newHospital.name = '',
              this.newHospital.isRec = '',
              this.newHospital.hospitalGrade = '',
              this.newHospital.hospitalType = '',
              this.newHospital.doctorNumber = '',
              this.newHospital.depTmNumber = '',
              this.newHospital.region = '',
              this.newHospital.addr = '',
              this.newHospital.phone = '',
              this.newHospital.resume = ''

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });

          this.addStauts = true;
          this.newHospital.id = '',
            this.newHospital.name = '',
            this.newHospital.isRec = '',
            this.newHospital.hospitalGrade = '',
            this.newHospital.hospitalType = '',
            this.newHospital.doctorNumber = '',
            this.newHospital.depTmNumber = '',
            this.newHospital.region = '',
            this.newHospital.addr = '',
            this.newHospital.phone = '',
            this.newHospital.resume = ''

        });
      }
      this.dialogFormVisible = false;
    },
    //医院编辑
    handleEdit(row) {
      this.addStauts = false;
      this.newHospital.id = row.id;
      this.newHospital.name = row.name;
      this.newHospital.isRec = row.isRec;
      this.newHospital.hospitalGrade = row.hospitalGrade;
      this.newHospital.hospitalType = row.hospitalType;
      this.newHospital.doctorNumber = row.doctorNumber;
      this.newHospital.depTmNumber = row.depTmNumber;
      this.newHospital.region = row.region;
      this.newHospital.addr = row.addr;
      this.newHospital.phone = row.phone;
      this.newHospital.resume = row.resume;
      this.dialogFormVisible=true
    },
    //筛选
    doctorFilter(){
      if (this.department !== "请选择省市") {
        this.doctor.depTmName = this.department;
      }else {
        this.doctor.depTmName = '';
      }
      if (this.post !== "全部") {
        this.doctor.positionName = this.post;
      }else {
        this.doctor.positionName = '';
      }
      this.filterStatus = true;

      this.$axios({
        method: 'GET',
        url: '/hospital/getAll/filter',
        params: {
          name: this.doctor.name,
          depTmName: this.doctor.depTmName,
          positionName: this.doctor.positionName,
          approvalStatus: this.active,
          current: this.val,
          size: 10
        }
      }).then((data) => {
        this.tableData = data.data.data.records;
        this.total = data.data.data.total
      })
    },
    //医生详情
    handleClick(obj){
      console.log(obj);
      this.$router.push({name:'HospitalInfo',params:{
          doctor: obj
        }})
    },
    //医生删除
    delDoctor (index, row) {
      this.$confirm('此操作将永久删除该信息, 是否删除', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index,1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getHospitalList(cur, len){
      this.$axios({
        method: 'GET',
        url: '/hospital/getAll',
        params: {
          current: cur,
          size: len
        }
      }).then((data) => {
        this.tableData = data.data.data.records;
        console.log(this.tableData);
        this.total = data.data.data.total;
        this.val = cur;
      })
    },
    //分页查询操作，要判断是否筛选过
    handleCurrentChange(val) {
      if (this.filterStatus) {
        this.doctorFilter(val, 1);
        return
      }
      this.getHospitalList(val, 10);
    }
  },
  created() {
    this.getHospitalList(1, 10)
  }
}
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
#data_2_1 {
  /* border: 1px solid red; */
  height: 50px;
}
</style>
